<template>
    <div class="">
        <el-dialog title="福利大厅" v-dialogDrag :visible.sync="WelfareHallVisible" ref="phone" width="826px" :modal-append-to-body="true" :append-to-body="true" :close-on-click-modal="false" center>
            <!-- <p
                style="
                    background: linear-gradient(180deg, #a01e14, #500f0a);
                    font-family: '方正毡笔黑简体';
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    text-align: center;
                    font-size: 30px;
                "
            >
                福利使用教程
            </p> -->
            <!-- <div class="content">{{ presentationcontent.welfareText }}</div> -->
            <div class="content" v-html="presentationcontent.welfareText"></div>
        </el-dialog>
    </div>
</template>

<script>
import { WelfareHalls } from '@/api/url'
export default {
  props: {},
  created () { },
  data () {
    return {
      WelfareHallVisible: false,
      presentationcontent: ''
    }
  },
  mounted () {
    this.$EventBus.$on('openWelfareHall', (data) => { this.openWelfareHall() })
  },
  methods: {
    openWelfareHall () { this.WelfareHalls().then(() => { this.WelfareHallVisible = true }) },
    async WelfareHalls () {
      const res = await WelfareHalls()
      if (res.data.code === 200) {
        // console.log(res);
        this.presentationcontent = JSON.parse(res.data.data)
      }
    }
  },
  computed: {},
  watch: {},
  components: {},
  beforeDestroy () {//移除监听事件
    clearTimeout(this.timer)
    this.$EventBus.$off("openWelfareHall")
  },
}
</script>

<style scoped lang='less'>
/deep/.el-dialog__body {
    height: 498px !important;
    background: url('@/assets/welfarehall.png') !important;
    padding: 36px 100px 0px !important;
}
.content {
    width: 625px;
    height: 380px;
    margin: 0 auto;
    overflow-y: auto;
    font-size: 16px !important;
    font-family: FZHei-B01S, FZHei-B01S-Regular !important;
    font-weight: 400 !important;
    text-align: left;
    color: #742014 !important;
    line-height: 24px;
}
</style>
